<template>
    <div class="home-classic">
        <h1>经典歌单</h1>
        <div class="wrapper" ref="wrapper">
            <!-- 滚动所需的容器 -->
            <ul class="content" ref="content">
                <li v-for="(item,index) in listData" :key="index">
                    <div class="cover">
                        <van-image :src="item.cover_url_big" radius="10"/>
                        <span>{{item.access_num | numFilter(2)}}万</span>
                    </div>
                    <span>{{item.title}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { betterScrollHorizontal } from "../../common/betterScroll.js";
export default {
    data(){
        return{
            listData:[],
            pageNo: 1
        }
    },
    created(){
        this.getData(59, this.pageNo, 10)
    },
    methods:{
        getData(id, pageNo, pageSize){
            this.$request('get','/recommend/playlist',{
                id,
                pageNo,
                pageSize
            }).then(res=>{
                console.log(res)
                if(res.result == 100){
                    this.listData = res.data.list;
                }
                //函数调用，调用横向滚动的方法
                betterScrollHorizontal(
                    this,
                    this.$refs.wrapper,
                    this.$refs.content,
                    this.listData.length,
                    10
                )
            })
        },
    },
    filters:{
        //处理播放量的显示格式
        /**
         * param num: 小数位固定的位数
         * param value: 处理的数值
         */
        numFilter(value,num){
            //小数位固定为num位
            return parseFloat(value/10000).toFixed(num)
        }
    }
}
</script>

<style scoped>
.wrapper{
    width: 100%;/*容器的宽度就是屏幕的宽度*/
    overflow: hidden;
}
ul.content li{
    display: inline-block;
    width: 10rem;
    vertical-align: top;/*垂直方向的对齐方式 */
}
ul.content li * {
    margin: 0 0.1rem;
}
ul.content li > span{
    font-size: 0.8rem;
    color: #625858;
}
.cover{
    position: relative;
}
.cover > span{
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color:white;
    border-radius: 1rem;
    width: 5rem;
} 
</style>